<template>
    <view class="step4-box step-box">
        <UNavbar title="维修材料"> </UNavbar>
        <view class="tips">
            <view>照片请包含所有物品</view>
        </view>
        <up-table class="manb20">
            <up-tr>
                <up-th>物资名称</up-th>
                <up-th>数量</up-th>
            </up-tr>
            <up-tr v-for="item in data.emps">
                <up-td>{{ item.name }}</up-td>
                <up-td>{{ item.num }}</up-td>
            </up-tr>
        </up-table>
        <view style="padding: 0 20rpx">
            <up-upload
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                :maxCount="1"
            ></up-upload>
        </view>
        <TabStep @leftClick="onLeftClick" @rightClick="onRightClick"></TabStep>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onHide } from '@dcloudio/uni-app'; // Uniapp 页面生命周期
import TabStep from './TabStep.vue';
import UNavbar from '@/components/YNavbar/index.vue';
onMounted(() => {
    initAudio();
});

// 页面隐藏时停止播放
onHide(() => {
    destroyAudio();
});
let audio = ref(null);
const initAudio = () => {
    audio.value = uni.createInnerAudioContext();
    audio.value.src = '/static/t5.mp3'; // 替换为实际音频URL
    try {
        audio.value.play();
        console.log('正在播放...');
    } catch (error) {
        console.error('播放失败:', error);
        uni.showToast({
            title: '自动播放失败',
            icon: 'error',
        });
    }
};
const destroyAudio = () => {
    audio.value.destroy();
};

const data = reactive({
    emps: [
        {
            name: '红外对射',
            num: '5',
        },
        {
            name: '手动板',
            num: '5',
        },
        {
            name: '脱扣器',
            num: '6',
        },
        {
            name: '抱箍',
            num: '12',
        },
        {
            name: '电源',
            num: '1',
        },
        {
            name: '电磁阀',
            num: '1',
        },
        {
            name: '主板',
            num: '2',
        },
        {
            name: '电工胶布',
            num: '2',
        },
        {
            name: '电池',
            num: '10',
        },
        {
            name: '电池盒',
            num: '3',
        },
        {
            name: '生料带',
            num: '1',
        },
        {
            name: 'LED灯',
            num: '3',
        },
        {
            name: '开关电源',
            num: '4',
        },
        {
            name: '灯条',
            num: '20',
        },
        {
            name: '接线端子',
            num: '4',
        },
    ],
});
const onLeftClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step4',
    });
};

const onRightClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step6',
    });
};
</script>

<style lang="scss">
.step4-box {
    .u-td {
        height: auto;
    }
}
</style>
